<script lang="ts" setup>
const options = defineModel({ type: Object, default: () => ({}) });
</script>

<template>
  <div class="flex items-stretch gap-x-20">
    <div class="w-300 flex flex-col gap-y-6">
      <div class="w-full flex justify-between gap-x-6">
        <div class="h-60 w-60% flex-center rounded-4 bg-primary-1 px-4 text-center text-white">{{ $t('settings.view.homepage.column1') }}</div>
        <div class="h-60 flex-center flex-grow flex-col gap-y-6 rounded-4 bg-primary-1 px-4 text-center text-white">
          {{ $t('settings.view.homepage.column3') }}
        </div>
      </div>

      <template v-if="options.Column == 1">
        <div class="flex justify-between gap-x-6">
          <div class="h-60 w-40% flex-center rounded-4 bg-primary-1 px-4 text-center text-white">
            {{ $t('settings.view.homepage.column11') }}
          </div>
          <div class="h-60 flex-center flex-grow rounded-4 bg-primary-1 px-4 text-center text-white">
            {{ $t('settings.view.homepage.column12') }}
          </div>
        </div>
      </template>
      <template v-else>
        <div class="h-60 flex-center rounded-4 bg-primary-1 px-4 text-center text-white">{{ $t('settings.view.homepage.column12') }}</div>
      </template>

      <div class="h-30 flex-center rounded-4 bg-primary-1 px-4 text-center text-white">{{ $t('settings.view.homepage.column13') }}</div>
      <div class="w-full flex justify-between gap-x-6">
        <div class="w-60% flex flex-col gap-y-6">
          <div class="h-40 flex-center flex-grow rounded-4 bg-primary-1 px-4 text-center text-white">{{ $t('settings.view.homepage.column8') }}</div>
        </div>
        <div class="flex flex-grow flex-col gap-y-6">
          <div class="h-60 flex-center rounded-4 bg-primary-1 px-4 text-center text-white">{{ $t('settings.view.homepage.column9') }}</div>
          <div class="h-180 flex-center rounded-4 px-4 text-center text-white" :class="[options.OperationCard == 1 ? 'bg-primary-1' : 'bg-gray-1']">{{ $t('settings.view.homepage.column4') }}</div>
        </div>
      </div>
    </div>

    <div class="flex-grow">
      <AList size="small" :bordered="false">
        <AListItem>
          <AListItemMeta :title="$t('settings.view.homepage.column4')">
            <template #avatar>
              <ASwitch v-model="options.OperationCard" checked-value="1" unchecked-value="2" />
            </template>
          </AListItemMeta>
        </AListItem>
        <AListItem>
          <AListItemMeta :title="$t('settings.view.homepage.column11')">
            <template #avatar>
              <ASwitch v-model="options.Column" checked-value="1" unchecked-value="2" />
            </template>
          </AListItemMeta>
        </AListItem>
      </AList>
    </div>
  </div>
</template>

<style lang="scss" scoped>
</style>
